import React from 'react'
import './Selected_templates.scss'
// import Selected from './Selected/Selected'
import Selection from './Selection/Selection'

function Selected_templates() {

    return (
        <div className="selected-templates-container">
            <div className="breadcrumb-bar">
                <span className='breadcrumb-title'>全部模板</span>
                <span className="breadcrumb-separator">&gt;</span>
                <span className="result-count">约 <span className="highlight">10000+</span> 个搜索结果</span>
                <span className="user-tip">你是不是在找：</span>
                <button className="tip-btn">新媒体</button>
                <button className="tip-btn">自媒体</button>
                <button className="tip-btn">新闻资讯</button>
                <button className="tip-btn">h5党建</button>
                <button className="tip-btn">小红书</button>
                <button className="tip-btn">微信小图</button>
                <button className="compare-btn">同行借鉴</button>
            </div>
            <div className="filter-bar">
                <div className="filter-row">
                    <span className="filter-label">类型</span>
                    <span className="filter-btn">H5</span>
                    <span className="filter-btn">海报</span>
                    <span className="filter-btn">长页</span>
                    <span className="filter-btn">电子画册</span>
                    <span className="filter-btn">表单</span>
                    <span className="filter-btn">互动</span>
                    <span className="filter-btn">视频</span>
                    <span className="filter-btn more">+ 多选</span>
                </div>
                <div className="filter-row">
                    <span className="filter-label">用途</span>
                    <span className="filter-btn">邀请函</span>
                    <span className="filter-btn">人才招聘</span>
                    <span className="filter-btn">培训招生</span>
                    <span className="filter-btn">宣传介绍</span>
                    <span className="filter-btn">活动促销</span>
                    <span className="filter-btn">宣传公告</span>
                    <span className="filter-btn">祝福问候</span>
                    <span className="filter-btn">行政办公</span>
                    <span className="filter-btn">人物介绍</span>
                    <span className="filter-btn">心情日签</span>
                    <span className="filter-btn">音乐相册</span>
                    <span className="filter-btn">总结汇报</span>
                    <span className="filter-btn">表单信息</span>
                </div>
                <div className="filter-row">
                    <span className="filter-label">行业</span>
                    <span className="filter-btn">教育培训</span>
                    <span className="filter-btn">卫生医疗</span>
                    <span className="filter-btn">理财保险</span>
                    <span className="filter-btn">家居装修</span>
                    <span className="filter-btn">网络科技</span>
                    <span className="filter-btn">文体娱乐</span>
                    <span className="filter-btn">酒店旅游</span>
                    <span className="filter-btn">餐饮美食</span>
                    <span className="filter-btn">房地产</span>
                    <span className="filter-btn">服装服饰</span>
                    <span className="filter-btn">汽车行业</span>
                    <span className="filter-btn">数码家电</span>
                    <span className="filter-btn">农业园林</span>
                    <span className="filter-btn">能源行业</span>
                    <span className="filter-btn">批发零售</span>
                    <span className="filter-btn">交通运输</span>
                    <span className="filter-btn">生活服务</span>
                    <span className="filter-btn gengduo">更多 <span className="arrow">▼</span></span>
                </div>
                <div className="filter-row">
                    <span className="filter-label">其他</span>
                    <span className="filter-btn">节假 <span className="arrow">▼</span></span>
                    <span className="filter-btn">风格 <span className="arrow">▼</span></span>
                    <span className="filter-btn">功能 <span className="arrow">▼</span></span>
                    <span className="filter-btn">场景 <span className="arrow">▼</span></span>
                    <span className="filter-btn">菜单 <span className="arrow">▼</span></span>
                    <span className="filter-btn">游戏 <span className="arrow">▼</span></span>
                </div>
            </div>
            <div className="selected-bar">
                <div className="selected-bar-left">
                    <span className="selected-bar-item active">综合排序</span>
                    <span className="selected-bar-item">最新 <span className="tag new">New</span></span>
                    <span className="selected-bar-item">最热 <span className="tag hot">Hot</span></span>
                    <span className="selected-bar-item">价格 <span className="arrow">\/</span></span>
                    <span className="selected-bar-item">颜色 <span className="color-icon" /> <span className="arrow">▼</span></span>
                    <span className="selected-bar-divider" />
                    <span className="selected-bar-item"> 版式: <span className="arrow">全部 ▼</span></span>
                    <span className="selected-bar-divider" />
                    <span className="selected-bar-item"> 视频时长: <span className="arrow">全部 ▼</span></span>
                    <span className="selected-bar-divider" />
                    <span className="selected-bar-item"> 价格: <span className="arrow">全部 ▼</span></span>
                </div>
                <a className="selected-bar-link" href="#">咨询定制设计服务</a>
                <div className="selected-bar-progress">
                    <div className="selected-bar-progress-inner" />
                    <hr />
                </div>
            </div>
            <Selection />
        </div>
    )
}

export default Selected_templates
